<!DOCTYPE html>
<html>

<head>
<title>Image Recognition Programme</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" href="css/ae_base.css">-->
<script src="js/jquery-3.2.1.js"></script>
<link href="css/jquery.selectareas.css" rel="stylesheet">
<script src="js/jquery.selectareas.js"></script>

<!-- Autocomplete Input -->
<link rel="stylesheet" href="autocomplete/easy-autocomplete.css" type="text/css" />
<link rel="stylesheet" href="autocomplete/easy-autocomplete.themes.css" type="text/css" />
<script src="autocomplete/jquery.easy-autocomplete.js"></script>

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
  
<style>

html, body, .container 
{
    height: 100%;
}

.container 
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.serif_xlarge
{    
	font-family: 'Josefin Sans', sans-serif;
	font-size: 600%
	
}

.serif_medium
{    
	font-family: 'Josefin Sans', sans-serif;
	font-size: 120%;
	text-align:center;
}

#inner1 {
  display: table;
  margin: 0 auto;
}

#inner2 {
  display: table;
  margin: 0 auto;
}


</style>  
  
</head>  

<body>

	<div>

<div id="inner1" style="margin-top:0px">
		
		<div style="margin-bottom:0px;margin-top:0px;vertical-align:middle; text-align:center">
			<img style="margin: 0px 0px 0px 0px;" src="./images/logo.png" width="100" height="100">
		</div>					
		
		<span style="margin: 0px 0px 0px 0px;" class="serif_medium">Images Annotation Programme</span>		
</div>
	
		<div style="position:absolute;
  top:50%;
  left:50%;
  padding:15px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);" 
  
		id="inner2" class="serif_xlarge">
			Thank You !	
		</div>			
		
	</div>

</body>


</html>